<script setup>

defineProps({
    sources: {
        type: Array,
        default: () => []
    },
    total: {
        type: Number,
        default: 0
    },
    skeletonLoading: {
        type: Boolean,
        default: false
    },
    type: {
        type: String,
        default: ''
    }
})

</script>

<template>
    <div class="bg-white dark:bg-gray-600 shadow p-3 rounded-[6px]
              flex flex-col sm:flex-row justify-between items-center
              hover:bg-[#f5f5f5] dark:hover:bg-gray-700 hover:shadow-lg transition duration-300 ease-in-out mb-2"
        v-for="(item, i) in sources" :key="i">
        <div class="flex flex-col flex-1 items-start mr-2">

            <div class="text-sm text-slate-600 mb-2 text-[24px] font-inter leading-[30px] font-[600] text-ellipsis text-wrap dark:text-white break-all px-2 "
                v-html="i + 1 + '. ' + item.disk_name"></div>
            <div class="text-sm text-slate-600 text-[#666] font-inter font-[600] text-ellipsis text-wrap dark:text-white break-all px-2"
                v-for="(item2,index2) of item.files" v-html="item2"></div>
            <div class="mt-2 text-xs text-slate-600 text-[#888] font-inter font-[600] text-ellipsis text-wrap dark:text-white break-all px-2">更新时间：{{ item.update_time }}</div>
            <div class="text-xs text-slate-600 text-[#888] font-inter font-[600] text-ellipsis text-wrap dark:text-white break-all px-2">分享人：{{ item.share_user }}</div>
        </div>

        <div class="text-[12px] text-slate-600 mt-1 flex flex-row gap-3">
            <nuxt-link
                class="flex flex-row items-center p-1 bg-slate-200 rounded gap-2 hover:bg-slate-300 dark:bg-gray-700 dark:hover:bg-gray-600"
                :to="item.link" target="_blank">
                <img class="w-[20px]" v-if="item.disk_type === 'ALY'" src="@/assets/netdisk/aliyun.png" alt="aliyun">
                <img class="w-[20px]" v-else-if="item.disk_type === 'QUARK'" src="@/assets/netdisk/quark.png" alt="quark">
                <img class="w-[20px]" v-else-if="item.disk_type === 'BDY'" src="@/assets/netdisk/baidu.png" alt="baidu">
                <img class="w-[20px]" v-else-if="item.disk_type === 'XUNLEI'" src="@/assets/netdisk/xunlei.png" alt="xunlei">
                <img class="w-[20px]" v-else src="@/assets/netdisk/xunlei.png" alt="xunlei">
                <span class="dark:text-white" v-if="item.disk_type === 'ALY'">阿里云盘</span>
                <span class="dark:text-white" v-else-if="item.disk_type === 'QUARK'">夸克网盘</span>
                <span class="dark:text-white" v-else-if="item.disk_type === 'BDY'">百度网盘</span>
                <span class="dark:text-white" v-else-if="item.disk_type === 'XUNLEI'">迅雷网盘</span>
                <span class="dark:text-white" v-else>其他</span>
                <!-- <span class="dark:text-white" v-else>提取码：{{ link.pwd }}</span> -->
                <!-- <span class="dark:text-white" v-if="link.pwd">提取码：{{ link.pwd }}</span> -->
            </nuxt-link>
        </div>
    </div>
</template>
<style>
em {
    color: blue;
    margin: 0 2px;
}

.dark em {
    color: deepskyblue;
}
</style>
<style scoped>
.truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>